<%--
  Created by IntelliJ IDEA.
  User: K
  Date: 2022/8/18
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>userEdit</title>
    <!-- 通过cdn的方式引入，需要连网 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="${pageContext.request.contextPath}/static/js/vue.min.js" type="text/javascript"></script>
    <!-- 解决浏览器生产提示信息 -->
    <script> Vue.config.productionTip = false </script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入vue.js -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <el-form ref="form" :model="employee" label-width="80px">
        <el-form-item label="用户名">
            <el-input v-model="employee.employeName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="employee.employePassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="employee.employeAge"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="employee.employePhone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="employee.employeGender" placeholder="请选择性别">
                <el-option label="其他" value="其他"></el-option>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="权限">
            <el-select v-model="employee.employePower" placeholder="请选择职位">
                <el-option label="经理" value="经理"></el-option>
                <el-option label="前台" value="前台"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updateEmployeeById">修改用户</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            employee: {
                employeId: "",
                employeName: "",
                employePassword: "",
                employeAge: "",
                employeGender: "",
                employePhone: "",
                employePower: "",
            }
        },
        methods: {
            updateEmployeeById() {
                var _this = this;
                $.ajax({
                    url: '${pageContext.request.contextPath}/employee/updateEmployee',
                    dataType: 'json',
                    type: 'post',
                    data:
                        {
                            employeId: this.employee.employeId,
                            employeName: this.employee.employeName,
                            employePassword: this.employee.employePassword,
                            employeAge: this.employee.employeAge,
                            employeGender: this.employee.employeGender,
                            employePhone: this.employee.employePhone,
                            employePower: this.employee.employePower,
                        },
                    success: function (rs) {
                        if (rs.code == 200) {
                            console.log(_this.employee)
                            _this.$alert(rs.msg + ",正在更新数据...")
                            setTimeout(function () {
                                location.href = '${pageContext.request.contextPath}/employeeList';
                            }, 2000)
                        } else {
                            _this.$alert(rs.msg)
                        }
                    }
                })
            }
        },
        mounted() {
            this.employee = JSON.parse(localStorage.getItem("updateUser"))
        }
    })
</script>
</body>
</html>